<template>
	<div class="editeDetail">
		<el-row class="company-top">
			<el-col>
				<div class="btns flex">
					<div class="btn" @click="$router.go(-1)">取消</div>
					<div class="btn active_bgcolor" @click="UpdateCompanyInfo">保存</div>
				</div>
				<head-top title='公司信息'></head-top>
				<div class="editeinfo">
					<div class="editetop">
						<img src="../../../static/image/headpic.png" alt="" class="company_pic">
						<div class="company_info">
							<div class="rowipt flex">
								<div class="title">公司名称：</div>
								<el-input v-model="info.name" placeholder="请输入公司名称" class="ipt"></el-input>
							</div>
							<div class="rowipt flex">
								<div class="title">公司官网：</div>
								<el-input v-model="info.webSite" placeholder="请输入官网地址" class="ipt"></el-input>
							</div>
							<div class="rowipt flex">
								<div class="title">公司性质：</div>
								<el-select v-model="info.property" placeholder="请选择公司性质" class="ipt">
									<el-option v-for="item in companyPropList" :key="item" :label="item" :value="item">
									</el-option>
								</el-select>
							</div>
							<div class="rowipt flex">
								<div class="title">公司规模：</div>
								<el-select v-model="info.size" placeholder="请选择公司规模" class="ipt">
									<el-option v-for="item in sizeList" :key="item" :label="item" :value="item">
									</el-option>
								</el-select>
							</div>
							<div class="rowipt flex">
								<div class="title">所属行业：</div>
								<el-select v-model="info.companyHY" placeholder="请选择所属行业" class="ipt">
									<el-option v-for="item in hyList" :key="item" :label="item" :value="item">
									</el-option>
								</el-select>
							</div>
						</div>
					</div>
					<div class="editebtm">
						
						<div class="rowipt flex" style="margin-top: 28px;">
							<Map @lnglat='getlnglat' ref='getAdr'></Map>
						</div>
					</div>
				</div>

				<head-top title='公司简介'></head-top>

				<textarea type="textarea" v-model="info.contents" class="jjarea"></textarea>

				<head-top title='企业文化'></head-top>
				<Editor style='margin-top: 24px;' @getContent='getcnt'></Editor>

			</el-col>
		</el-row>
	</div>
</template>

<script>
	import headTop from '@/components/headTop'
	import Editor from '@/components/Editor'
	import Map from '@/components/map'
	import {
		GetHy,
		GetCompanyProp,
		UpdateCompanyInfo,
		GetCompanyInfo
	} from '@/api/getData'
	export default {
		data() {
			return {
				input: '',
				hyList: [], //行业
				companyPropList:[], //公司性质
				sizeList:['0-20人','20-99人','100-499人','500-999人','1000-9999人','10000人以上'],
				info: {
					// id: 0,
					// companyId: 0,
					name: "",
					property: "",
					size: "",
					contents: "",
					contents2: "",
					webSite: "",
					address: "",
					lng: 0,
					lat: 0,
					companyHY:''
				}
			}
		},
		components: {
			headTop,
			Editor,
			Map

		},
		created() {
			this.GetHy();
			this.GetCompanyProp();
			this.GetCompanyInfo();
		},
		methods: {
			
			async GetCompanyInfo(){
				const res = await GetCompanyInfo();
				if (res.code == 1) {
					console.log(res.data);
					this.info=res.data;
				
				}else{
					
				}
			},
			
			//更新公司信息
			async UpdateCompanyInfo(){
				let that=this;
				that.info.address=that.$refs.getAdr.searchKey;
				if(that.info.name==''){
					that.showToast('公司名称不能为空');
					return false
				}
				if(that.info.property==''){
					that.showToast('公司性质不能为空');
					return false
				}
				if(that.info.size==''){
					that.showToast('公司规模不能为空');
					return false
				}
				if(that.info.companyHY==''){
					that.showToast('公司规模不能为空');
					return false
				}
				if(that.info.address==''){
					that.showToast('公司地址不能为空');
					return false
				}
				const res = await UpdateCompanyInfo(that.info);
				
				if (res.code == 1) {
					console.log(res.data);
					
				
				}else{
					
				}
			},
			
			//获取经纬度
			getlnglat(e){
				console.log('卡开');
				console.log(e);
				let that=this;
				that.info.lng=e.lng;
				that.info.lat=e.lat;
			},
			
			//获取企业文化
			getcnt(e){
				console.log(e);
				this.info.contents2=e;
			},
			//获取公司性质
			async GetCompanyProp(){
				let that = this;
				const res = await GetCompanyProp();
				if (res.code == 1) {
					that.companyPropList = res.data;
					console.log(that.companyPropList);
				}
			},
			
			//获取行业列表
			async GetHy() {
				let that = this;
				const res = await GetHy();
				if (res.code == 1) {
					that.hyList = res.data;
					
				}
			},
			
			//提示框
			showToast(msg,icon){
				this.$message({
					message: msg,
					icon: icon?icon:'none',
					type:'warning'
				});
			},
			
		}
	}
</script>

<style>
	.editeDetail .el-input__inner {
		height: 40px;
		/* background: #F8F8FB; */
		border: 1px solid #EEEEEE;
	}

	.editeDetail .el-input__icon {
		line-height: 40px;
	}
</style>
<style lang="less" scoped="scoped">
	@import '../../style/mixin';

	.editeDetail {
		padding: 50px 0px;
		box-sizing: border-box;

		.jjarea {
			margin-top: 24px;
			margin-bottom: 40px;
			padding: 10px;
			box-sizing: border-box;
			width: 100%;
			min-height: 222px;
			color: #999999;
			font-size: 16px;
			line-height: 24px;
		}

		.btns {
			margin-bottom: 20px;

			.btn {
				cursor: pointer;
				width: 110px;
				height: 36px;
				line-height: 36px;
				background: #CCCCCC;
				opacity: 1;
				margin-right: 20px;
				color: #FFFFFF;
				font-size: 16px;
				text-align: center;
			}
		}

		.editeinfo {
			background-color: #FFFFFF;
			padding: 40px 40px 80px;
			box-sizing: border-box;
			margin: 40px 0px;
			width: 100%;


			.editetop {
				border-bottom: 1px solid #EEEEEE;
				display: flex;
				padding-bottom: 10px;
				box-sizing: border-box;
			}



			.company_pic {
				width: 97px;
				height: 97px;
				margin-right: 20px;
			}

			.ipt1 {
				width: 300px;

			}

			.company_info {

				flex: 1;
				display: flex;
				flex-direction: column;

				.name {
					font-weight: 600;
					color: #333333;
					font-size: 24rpx;
					margin-bottom: 16px;
				}

				.rowipt {
					position: relative;
					margin-bottom: 16px;
					

					.title {
						color: #333333;
						font-size: 16px;
					}

					.ipt {

						// flex: 1;
						width: 197px;
					}


				}


			}

		}

	}
</style>
